<template>
	<div class="config-manage-top">
		<div class="config-manage-top-left">
			<div class="title">
				<global-svg-icon
					icon-name="return"
					width="18px"
					height="18px"
					style="margin-right: 10px; vertical-align: middle; cursor: pointer"
					@click="router.push('/config-manage/cameras/table')"
				></global-svg-icon>
				<!-- <p>{{ cameraInfoState.name }}</p> -->
				<p>算法配置</p>
			</div>
			<ul class="config-list">
				<li
					:key="index"
					v-for="(item, index) in props.areaState.areaList"
					:class="[props.areaState.areaId === item && 'active']"
					class="config-list-item"
					@click.stop="handleChangeAreaItem(item, index)"
				>
					<p>{{ index + 1 }}</p>
					<div v-if="props.areaState.areaList.length > 1" class="icon-close" @click.stop="handleDeleteAreaItem(item, index)">
						<i class="iconfont icon-close-line"></i>
					</div>
				</li>

				<li v-if="props.noInfraredCamera" @click.stop="addArea">
					<a-tooltip placement="top" :title="props.areaState.areaList.length >= MAX_AREA_NUM ? '无法添加更多' : undefined">
						<div class="config-list-item-area-add">
							<i class="iconfont icon-add-line"></i>
						</div>
					</a-tooltip>
				</li>
				<li v-if="props.noInfraredCamera" style="margin-left: 8px">
					<div class="AIname-right font-12">已配置({{ props.areaState.areaAiNum }}/7)</div>
				</li>
			</ul>
		</div>

		<div class="top-right-btn">
			<a-button :class="['copy-to', !cCopyBtnDisabled && 'copy-to-no-disabled']" :disabled="cCopyBtnDisabled" @click="emits('on-copy')">
				<i class="iconfont icon-file-copy-line"></i>
				复制到..
			</a-button>
		</div>
	</div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router';
import { MAX_AREA_NUM } from '../config';
import type { CameraInfoState, AreaState, PageControlState, CanvasState } from '../../../type';
interface TsProps {
	areaState: AreaState;
	cameraInfoState: CameraInfoState;
	pageControlState: PageControlState;
	canvasState: CanvasState;
	noInfraredCamera?: boolean;
}
const props = withDefaults(defineProps<TsProps>(), {
	areaState: () => {
		return {} as AreaState;
	},
	areaActiveIndex: 0,
	cameraInfoState: () => {
		return {} as CameraInfoState;
	},
	noInfraredCamera: true
});
const emits = defineEmits<{
	(e: 'on-change-area', id: number, index: number): void;
	(e: 'on-delete-area', id: number, index: number): void;
	(e: 'on-add-area'): void;
	(e: 'on-copy'): void;
}>();

const router = useRouter();

const cCopyBtnDisabled = computed(() => {
	return props.pageControlState.isEdit || props.canvasState.isEditCavans;
});

/**
 * 添加区域
 */
const addArea = () => {
	if (props.areaState.areaList.length < MAX_AREA_NUM) {
		emits('on-add-area');
	}
};

/**
 * 切换区域
 * @param id
 * @param index
 */
const handleChangeAreaItem = (id: number, index: number) => {
	emits('on-change-area', id, index);
};

/**
 * 删除区域
 * @param id
 * @param index
 */
const handleDeleteAreaItem = (id: number, index: number) => {
	emits('on-delete-area', id, index);
};
</script>

<style scoped lang="less">
.config-manage-top {
	box-sizing: border-box;
	display: flex;
	height: var(--cameras-top-height);
	padding-left: 20px;
	align-items: flex-end;
	justify-content: space-between;

	.copy-to {
		border: none !important;
		color: rgba(0, 156, 248, 1);
		background: none !important;
		transform: translateY(-10px);

		&:hover {
			background: none !important;
		}
	}

	.copy-to-no-disabled {
		&:hover {
			color: rgba(0, 156, 248, 1) !important;
			background: none !important;
		}
	}

	.config-manage-top-left {
		display: flex;
		align-items: center;

		.title {
			display: flex;
			align-items: center;
			width: calc(var(--cameras-tree-width) - 10px);
			font-size: 20px;
			font-weight: 700;
			font-style: normal;
			line-height: 28px; /* 140% */
			color: @text01;
		}

		.config-list {
			display: flex;
			gap: 4px;
			height: 36px;
			font-size: 14px;
			font-weight: 400;
			font-style: normal;
			text-align: center;
			color: @text02;
			align-items: center;

			.config-list-item-area-add {
				display: flex;
				width: 56px;
				height: 32px;
				border-radius: 10px;
				color: @primary02;
				background: @background02;
				box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.04);
				cursor: pointer;
				align-items: center;
				justify-content: center;
			}

			.config-list-item {
				position: relative;
				display: flex;
				width: 76px;
				height: 100%;
				font-size: 16px;
				font-weight: 700;
				line-height: 24px;
				cursor: pointer;
				align-items: center;
				justify-content: center;

				> p {
					position: absolute;
					z-index: 1;
				}

				.icon-close {
					position: absolute;
					top: -8px;
					right: 0;
					z-index: 1;
					display: none;
					width: 16px;
					height: 16px;
					border-radius: 50%;
					padding: 1px;
					background: rgba(255, 255, 255, 0.3);
					justify-content: center;
					align-items: center;

					> i {
						font-size: 12px;
					}
				}

				&.active,
				&:hover {
					&::after {
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
						content: ' ';
					}
				}

				&:hover {
					.icon-close {
						display: flex;
					}

					&::after {
						background: url('@/global-assets/imgs/bgc_area_item.png') no-repeat;
						background-size: contain;
						transform: translateY(2px);
					}
				}

				&.active {
					&::after {
						background: url('@/global-assets/imgs/bgc_area_item_active.png') no-repeat;
						background-size: contain;
						transform: translateY(2px);
					}
				}
			}
		}
	}

	.top-right-btn {
		display: flex;
		color: aliceblue;
		color: @text01;

		.copy-to {
			display: flex;
			height: 36px;
			border: 1px solid @borderColor02;
			border-radius: 156px;
			padding: 7px 20px;
			box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.04);
			justify-content: center;
			align-items: center;
			gap: 6px;
			cursor: pointer;
		}

		.save {
			display: flex;
			height: 36px;
			margin-left: 8px;
			border: 1px solid @primary01;
			border-radius: 40px;
			padding: 7px 20px;
			background: @secondary04;
			box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.04);
			cursor: pointer;
			justify-content: center;
			align-items: center;
			gap: 6px;
		}
	}
}
</style>
